<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>条件渲染</title>
</head>
<body>
  <div id="root">
    <h2>条件渲染</h2>
    <hr>
    <!-- v-show 可以接受布尔值/表达式作为属性值 -->
    <div v-show="true">{{ hello_name }}</div>
    <div v-show="0.1+0.2===0.3">{{ vue_name }}</div>

    <!-- v-if 可以接受布尔值/表达式作为属性值 -->
    <div v-if="n==1">{{ hello_name }}</div>
    <div v-else-if="n==2">{{ hello_name }}!</div>
    <div v-else-if="n==3">{{ hello_name }}!!</div>
    <div v-else-if="n>=3">{{ hello_name }} good</div>
    <button @click="n++">点击变换</button>

    <!-- 使用条件渲染管理多个元素 -->
    <template v-if="n==1">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </template>
  </div>
  <script type="text/javascript">
    const x= new Vue({
      el:'#root', 
      data:{ 
        hello_name:'Vue',
        vue_name:'Vue',
        n:1
      }
    })
  </script>
</body>
</html>